<template>
  <div class="Joblist">
    <div class="title">服务管理-企业发布职位-企业职位列表</div>
    <div class="Joblist_Box">
      <div class="Joblist_left">
        <!--审核通过-->
        <div class="jobModelBox" v-for="item of jobs" :key="item.id">
          <div class="jobModelA">
            <div class="ltop" style>
              <div class="ltopLeft" style="width: 90%">
                <div class="JobName">{{item.name}}</div>
                <div>{{item.tax?'税后':'税前'}}</div>
                <div>{{item.salaryPerMonthLow+'-'+item.salaryPerMonthHigh+'W/'+item.salaryCount+'年'}}</div>
                <div>
                  {{item.checkState==1?'提交时间：':'发布时间：'}}
                  <span
                    :style="item.checkState==1?'color: red':''"
                  >{{item.checkTime?item.checkTime:item.rdtime}}</span>
                </div>
              </div>
              <div
                class="EnterSta"
                :style="item.checkState==0?'':item.checkState==1?'color:#3377ff':'color:#FB5E57'"
                @click="toAudit"
              >{{item.checkState==0?'待审核':item.checkState==1?'审核通过':'不通过'}}</div>
            </div>
            <div class="lbottom_box">
              <div class="lbottom marginL">
                <div>{{item.city}}</div>
                <div>{{item.workTime}}</div>
                <div>{{item.licenseTypeId}}</div>
                <div>{{item.recruitingNumbers}}人</div>
              </div>
              <div class="lgoutong">
                <div  v-if="item.checkState==1">
                  待沟通：
                  <span >{{item.noCommunicate}}</span>
                </div>
                <div  v-if="item.checkState==1">
                  已沟通：
                  <span >{{item.communicated}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="lbtn">
            <div class="btnBox" @click="audit(item)">{{item.checkState==0?'审核':'修改'}}</div>
          </div>
        </div>
        <!-- <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>-->
      </div>
      <div class="Joblist_R">
        <div class="EnterInfor">
          <div
            class="lshiyong"
            v-if="enterlist.checkState==1"
          >试用剩余时间:{{enterlist.tryCooperTimeDays}}天</div>
          <div class="lcontent">
            <div
              class="fonSize"
            >{{enterlist.fullName.length>12 ? enterlist.fullName.slice(0,12)+ '...' : enterlist.fullName}}</div>
            <div class="icon_goutong" @click="toCom"></div>
          </div>
          <div class="EnterCont">
            <div>联系人：{{enterlist.contactName}}</div>
            <div>手机号：{{enterlist.phone}}</div>
            <div>企业类型：{{enterlist.type}}</div>
            <div>企业规模：{{enterlist.size}}</div>
            <div>企业性质：{{enterlist.nature}}</div>
            <div>企业地址：{{enterlist.addressStr}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Joblist',
  data() {
    return {
      total: 100,
      currentPage: 1,
      pageSize: 10,
      jobs: [],
      msg: '审核', //审核/修改
      enterlist: {},
      EnterStatus: '待审核' //待审核  审核通过  不通过
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.lAxios({
        method: 'post',
        url: '/platform/getCompanyJobInfor.do',
        params: {
          companyId: this.$route.query.id
        }
      }).then(res => {
        console.log(res)
        if (res.data) {
          this.jobs = res.data.data.list
        }
      })
      this.lAxios({
        method: 'post',
        url: '/platform/selectCompany.do',
        params: {
          companyId: this.$route.query.id
        }
      }).then(res => {
        console.log(res)
        if (res.data) {
          this.enterlist = res.data.data
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    toAudit() {},
    audit(item) {
      this.$router.push({
        path: '/ServiceAudit',
        query: { companyId: item.companyId, id: item.id }
      })
    },
    doTalent() {
      this.$router.push('/TalentResume')
    },
    doAudit() {
      this.$router.push('/ServiceAudit')
    },
    toCom() {
      this.$toComm.toCompany(this,this.enterlist.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.Joblist {
  box-sizing: border-box;
  width: 100%;
  // height: 100vh;
  background-color: #f7f9fc;
  font-size: 12px;
  padding-left: 20px;
  position: relative;
}
.title {
  height: 33px;
  line-height: 33px;
}
.Joblist_Box {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.Joblist_left {
  width: 80%;
  // height: 500px;
  background-color: white;
  margin-right: 20px;
  margin-bottom: 30px;
}
.Joblist_R {
  width: 20%;
}
.Joblist_left > div:nth-child(1) {
  margin-top: 30px;
}
.jobModelBox {
  width: 90%;
  height: 90px;
  display: flex;
  flex-direction: row;
  margin-left: 5%;
  margin-bottom: 10px;
}

.jobModelA {
  width: 90%;
  height: 89px;
  /*margin-right: 15px;*/
  /*border: 1px solid #797979;*/
  background-color: #f7f9fc;
}

.lbtn {
  width: 151px;
  height: 90px;
  color: #3377ff;
  font-size: 16px;
  border-left: 1px solid #ccc;
  background-color: #f7f9fc;
}
.btnBox {
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
  border: 1px solid #3377ff;
  margin-top: 30px;
  margin-left: 38px;
  cursor: pointer;
}
.EnterInfor {
  width: 20%;
  height: 337px;
  background-color: white;
  position: absolute;
  top: 33px;
  right: 0;
}

.EnterCont {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.EnterCont div {
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 28px;
}

.lshiyong {
  color: red;
  font-size: 12px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.lcontent {
  font-size: 16px;
  font-weight: bold;
  margin-top: 45px;
  margin-left: 28px;
  display: flex;
  flex-direction: row;
}

.lcontent > button {
  width: 41px;
  height: 23px;
  margin-left: 10px;
}

.ltop {
  width: 97%;
  margin-left: 10px;
  margin-top: 15px;
  position: relative;
}

.ltopLeft {
  width: 324px;
  height: 25px;
  display: flex;
  flex-direction: row;
}

.ltopLeft > div:nth-child(3) {
  color: #797979;
}

.ltop > div:nth-child(2) {
  color: #797979;
  position: absolute;
  top: 0;
  right: 20px;
}

.ltopLeft > div,
.lbottom div {
  /*flex: 1;*/
  display: flex;
  padding: 0 9px;
}

.lbottom {
  width: 295px;
  height: 15px;
  display: flex;
  flex-direction: row;
  margin-left: 30px;
  margin-top: 15px;
}
.lbottom div {
  font-size: 12px;
  line-height: 15px;
  border-right: 1px solid #797979;
  margin-right: 10px;
}
.lbottom div:nth-child(4) {
  border-right: none;
}
.lbottomB {
  width: 90%;
  height: 15px;
  /*border: 1px solid pink;*/
  display: flex;
  flex-direction: row;
}
.lbottom_box {
  width: 100%;
  margin-left: 10px;
  margin-top: 15px;
  position: relative;
}
.lbottom_box > .lbottomB {
  width: 295px;
  display: flex;
  flex-direction: row;

  div {
    flex: 1;
    margin-right: 20px;
  }
}
.lgoutong {
  width: 260px;
  height: 15px;
  /*cursor: pointer;*/
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  left: 45%;
  div {
    margin-right: 30px;
  }
}
.JobName {
  font-size: 14px;
  font-weight: bold;
  margin-left: 20px;
}
.marginL {
  margin-left: 20px;
}
.fontColor {
  color: #199ed8;
}
.EnterSta {
  /*border: 2px solid red;*/
  margin-left: 100px;
  line-height: 60px;
  font-size: 15px;
}
.icon_goutong {
  width: 28px;
  height: 28px;
  background: url('../../assets/imgs/communication/goutong.png') no-repeat;
  margin-left: 10px;
  img {
    width: 100%;
  }
}
.fonSize {
  font-size: 18px;
}
</style>
